<template>
    <el-dialog custom-class="el-dialog-600" :visible.sync="visible">
        <div class="dialog-tab-container">
            <el-button
                :type="passwordMode ? 'primary' : ''"
                @click="passwordMode = !passwordMode"
            >
                修改基本信息
            </el-button>
            <el-button
                :type="!passwordMode ? 'primary' : ''"
                @click="passwordMode = !passwordMode"
            >
                修改密码
            </el-button>
        </div>
        <div class="dialog-form-container">
            <div class="dialog-form-info" v-show="passwordMode">
                <el-form
                    :model="infoForm"
                    :rules="infoRules"
                    :ref="formRefOne"
                    :size="$formSize"
                    label-width="90px"
                >
                    <el-form-item label="姓名" prop="name">
                        <el-col :span="23">
                            <el-input
                                clearable
                                v-model="infoForm.name"
                                auto-complete="off"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="手机" prop="phone">
                        <el-col :span="23">
                            <el-input
                                clearable
                                v-model="infoForm.phone"
                                auto-complete="off"
                            ></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="Email" prop="email">
                        <el-col :span="23">
                            <el-input
                                clearable
                                v-model="infoForm.email"
                                auto-complete="off"
                            ></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="头像" prop="avatar">
                        <Uploader
                            v-model="infoForm.avatarUrl"
                            :on-success="thumbUpload"
                            :on-remove="removeThumbUpload"
                        />
                    </el-form-item>
                </el-form>
            </div>
            <div class="dialog-form-password" v-show="!passwordMode">
                <el-form
                    :model="passwordForm"
                    :rules="passwordRules"
                    :ref="formRefTwo"
                    label-width="80px"
                    :size="$formSize"
                >
                    <el-form-item label="原密码" prop="password">
                        <el-col :span="23">
                            <el-input
                                type="password"
                                clearable
                                v-model="passwordForm.password"
                                auto-complete="off"
                                placeholder="请输入原密码"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-col :span="23">
                            <el-input
                                type="password"
                                clearable
                                v-model="passwordForm.newPwd"
                                auto-complete="off"
                                placeholder="请输入新密码"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="okpassword">
                        <el-col :span="23">
                            <el-input
                                type="password"
                                clearable
                                v-model="passwordForm.okpassword"
                                auto-complete="off"
                                placeholder="请输入确认密码"
                            />
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false">
                取 消
            </el-button>
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit(passwordMode ? formRefOne : formRefTwo)"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { adminUser as Api } from "api";

export default {
    data() {
        // 手机号验证
        const checkPhone = (rule, value, callback) => {
            if (this.$validate.isPhone(value) || value == "") {
                callback();
            } else {
                return callback(new Error("请输入正确的手机号"));
            }
        };

        // 电子邮件验证
        const checkEmail = (rule, value, callback) => {
            if (this.$validate.isEmail(value) || value == "") {
                callback();
            } else {
                return callback(new Error("请输入正确的电子邮件"));
            }
        };

        const checkPassword = (rule, value, callback) => {
            if (this.$validate.isPassword(value) || value == "") {
                callback();
            } else {
                return callback(
                    new Error("密码须长度8-16位数并且需要小写字母+数组组合")
                );
            }
        };

        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            passwordMode: true,

            formRefOne: "formRefOne", // ref
            formRefTwo: "formRefTwo",

            // 表单
            infoForm: {
                name: "",
                phone: "",
                email: "",
                avatar: "",
            },
            passwordForm: {
                password: "",
                newPwd: "",
                okpassword: "",
            },

            // 验证
            infoRules: {
                phone: [{ validator: checkPhone, trigger: "change" }],
                email: [{ validator: checkEmail, trigger: "change" }],
            },
            passwordRules: {
                password: [
                    {
                        required: true,
                        message: "请输入原密码",
                        trigger: "change",
                    },
                ],
                newPwd: [
                    {
                        required: true,
                        validator: checkPassword,
                        trigger: "change",
                    },
                ],
                okpassword: [
                    {
                        required: true,
                        validator: checkPassword,
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        /* 图片上传 */
        thumbUpload(fileStr) {
            this.infoForm.avatar = fileStr;
        },

        /* 删除图片 */
        removeThumbUpload(fileStr) {
            this.infoForm.avatar = fileStr;
        },

        /* 确认按钮 */
        async onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });

            if (this.loading) {
                let url = this.passwordMode
                    ? Api.updateUserInfo
                    : Api.updatePassword;

                let params = this.passwordMode
                    ? (params = {
                          /* 修改用户信息 */
                          name: this.infoForm.name,
                          phone: this.infoForm.phone,
                          email: this.infoForm.email,
                          avatar: this.infoForm.avatar,
                      })
                    : (params = {
                          /* 修改用户密码 */
                          password: this.passwordForm.password,
                          newPwd: this.passwordForm.newPwd,
                          okpassword: this.passwordForm.okpassword,
                      });

                const { code, msg, data } = await this.$axios.put(url, params);

                if (code === 200) {
                    this.$storage.set("token", data.token); /* 重新储存token */

                    if (this.passwordMode)
                        this.$store.commit("getUserInfo", {
                            data: data.userInfo,
                        }); /* 更新用户信息 */

                    this.$msg.success(msg);
                    this.visible = false;
                } else {
                    this.$msg.error(msg ? msg : data);
                }

                this.loading = false;
            }
        },
    },
    watch: {
        visible(status) {
            if (!status) {
                this.$refs[this.formRefOne].resetFields();
                this.$refs[this.formRefTwo].resetFields();
            }
        },
    },
};
</script>

<style lang="less" scoped>
.dialog-tab-container {
    text-align: center;
    margin-bottom: 24px;
}
</style>